<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="video-js.css">
	<script src="video.js"></script>
	<style>
		.user-name {
			display: none;
			position: absolute;
			top: 5px;
			right: 10px;
			z-index: 10;
			min-width: 150px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			color: red;
			border: 1px solid red;
		}
		#example_video_1 {
			width: 100%;
			height: 500px;
		}
	</style>
</head>
<body>
<div id = "video-box" style="width:880px; height: 490px;">
	<video id="example_video_1" class="video-js vjs-default-skin" controls preload="true" width="800" height="800" data-setup="{}">
    	<source src="" type="video/mp4">
  	</video>
</div>
<button onclick="change()">换播放</button>
<button onclick="change1()">换播放1</button>
<button onclick="change2()">换播放2</button>
<button onclick="change2()">换播放3</button>
	<script>
/*    var id = "vedio";
    var newVideo = document.createElement("div");//创建一个标签
    newVideo.innerHTML = '<video id='+ id +' width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none"></video>';
    var videoBox = document.getElementById("video-box");//通过id号获取newVideo的父节点（也就是上一级的节点）
    videoBox.appendChild(newVideo);//把创建的节点newVideo添加到父节点中；*/
    //this.player = this.createVedioJs(id,options);
    //this.playModal=true;

	//传入视频ID,适用于页面上只有一个播放器的情况
	//teachOrder 采用哪种播放方式，默认采用html5的video标签播放，苹果不支持flash
	//mydata 是要传给播放器上显示的用户名
	var player = videojs("example_video_1",{
    //techOrder: ["html5","flash"],
	  mydata: {
		    username: 'xiaoming'
      },
    autoplay: true,
    /*source:{
        src:"http://42.192.8.31:8080/ysp/20220110/9000028_00002820210812110216_0004.mp4",
        type:"video/mp4"
    },*/
	  controlBar: {
			//fullscreenToggle:false,
		  volumeMenuButton:false
		}
	},function(){
		//这里是播放器初始化之后放置要显示的内容
		//更高级的应用可以创建一个组件(component)
		// var textNode = document.createElement('div');
		// textNode.className = 'user-name';
		// //textNode.innerHTML = this.options().mydata.username||'';
		// this.el().appendChild(textNode);
		// this.userName = textNode;
		// console.log(this)
		//this.play()
    this.on("loadstart",function(){
      console.log("开始请求数据 ");
    })
    this.on("progress",function(){
      console.log("正在请求数据 ");
    })
    this.on("loadedmetadata",function(){
      console.log("获取资源长度完成 ")
    })
    this.on("canplaythrough",function(){
      console.log("视频源数据加载完成");
      //that.player.play();
    })
    this.on("waiting", function(){
      console.log("等待数据")
    });
    this.on("play", function(){
      console.log("视频开始播放")
    });
    this.on("playing", function(){
      console.log("视频播放中")
    });
    this.on("pause", function(){
      console.log("视频暂停播放")
    });
    this.on("ended", function(){
      console.log("视频播放结束");
    });
    this.on("error", function(){
      console.log("加载错误")
    });
    this.on("seeking",function(){
      console.log("视频跳转中");
    })
    this.on("seeked",function(){
      console.log("视频跳转结束");
    })
    this.on("ratechange", function(){
      console.log("播放速率改变")
    });
    this.on("timeupdate",function(){
      console.log("播放时长改变");
    })
    this.on("volumechange",function(){
      console.log("音量改变");
    })
    this.on("stalled",function(){
      console.log("网速异常");
    });
	});

	function change(){
    player.pause();
    player.src("http://42.192.8.31:8080//ysp/20220110//34020100001320000136_000000_20201105140021_0055.mp4");
    player.load();
    player.play();
  }
function change1(){
  player.pause();
  player.src("http://42.192.8.31:8080//ysp/20220110//0000300_00010020210712091542_0000.mp4");
  player.load();
  player.play();
}
function change2(){
  player.pause();
  player.src("http://42.192.8.31:8080//ysp/20220110//0000300_00010020210712091542_0001.mp4");
  player.load();
  player.play();
}
function change2(){
  player.pause();
  player.src("http://42.192.8.31:8080/ysp/20220110/9000028_00002820210812110216_0004.mp4");
  player.load();
  player.play();
}

	//player.src()

	//var volumeMenuButton  = player.controlBar.getChild('volumeMenuButton').el();
	//volumeMenuButton.style.display='none'

	</script>
</body>
</html>
